/**
 * 分页控制组件
 */
import React from 'react';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';

interface PaginationControlsProps {
  currentPage: number;
  totalPages: number;
  pageSize: number;
  pageSizeOptions: number[];
  totalItems: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (size: number) => void;
  className?: string;
}

const PaginationControls: React.FC<PaginationControlsProps> = ({
  currentPage,
  totalPages,
  pageSize,
  pageSizeOptions,
  totalItems,
  onPageChange,
  onPageSizeChange,
  className = ''
}) => {
  // 生成页码数组
  const getPageNumbers = () => {
    const pages = [];
    const maxPagesToShow = 5;
    
    if (totalPages <= maxPagesToShow) {
      // 总页数少于要显示的页码数，显示所有页码
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // 总页数多于要显示的页码数，需要省略部分页码
      const leftSiblingIndex = Math.max(currentPage - 1, 1);
      const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
      
      const shouldShowLeftDots = leftSiblingIndex > 2;
      const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
      
      if (!shouldShowLeftDots && shouldShowRightDots) {
        // 左侧没有省略，右侧有省略
        for (let i = 1; i <= 3; i++) {
          pages.push(i);
        }
        pages.push(-1); // 表示省略号
        pages.push(totalPages);
      } else if (shouldShowLeftDots && !shouldShowRightDots) {
        // 左侧有省略，右侧没有省略
        pages.push(1);
        pages.push(-1); // 表示省略号
        for (let i = totalPages - 2; i <= totalPages; i++) {
          pages.push(i);
        }
      } else if (shouldShowLeftDots && shouldShowRightDots) {
        // 两侧都有省略
        pages.push(1);
        pages.push(-1); // 表示省略号
        pages.push(currentPage - 1);
        pages.push(currentPage);
        pages.push(currentPage + 1);
        pages.push(-2); // 表示省略号
        pages.push(totalPages);
      }
    }
    
    return pages;
  };

  // 计算当前显示的项目范围
  const startItem = (currentPage - 1) * pageSize + 1;
  const endItem = Math.min(currentPage * pageSize, totalItems);

  return (
    <div className={`flex flex-col sm:flex-row items-center justify-between gap-4 ${className}`}>
      <div className="text-sm text-muted-foreground">
        显示 {totalItems > 0 ? startItem : 0}-{endItem} 项，共 {totalItems} 项
      </div>
      
      <div className="flex items-center gap-1">
        {/* 首页按钮 */}
        <button
          onClick={() => onPageChange(1)}
          disabled={currentPage === 1}
          className="p-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
          aria-label="首页"
        >
          <ChevronsLeft className="h-4 w-4" />
        </button>
        
        {/* 上一页按钮 */}
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="p-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
          aria-label="上一页"
        >
          <ChevronLeft className="h-4 w-4" />
        </button>
        
        {/* 页码按钮 */}
        <div className="flex items-center">
          {getPageNumbers().map((pageNum, index) => {
            if (pageNum === -1 || pageNum === -2) {
              // 显示省略号
              return (
                <span key={`ellipsis-${index}`} className="px-3 py-2">
                  ...
                </span>
              );
            }
            
            return (
              <button
                key={pageNum}
                onClick={() => onPageChange(pageNum)}
                className={`min-w-[36px] h-9 px-3 py-2 rounded-md transition-colors ${
                  currentPage === pageNum
                    ? 'bg-primary text-primary-foreground'
                    : 'hover:bg-muted'
                }`}
              >
                {pageNum}
              </button>
            );
          })}
        </div>
        
        {/* 下一页按钮 */}
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages || totalPages === 0}
          className="p-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
          aria-label="下一页"
        >
          <ChevronRight className="h-4 w-4" />
        </button>
        
        {/* 末页按钮 */}
        <button
          onClick={() => onPageChange(totalPages)}
          disabled={currentPage === totalPages || totalPages === 0}
          className="p-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
          aria-label="末页"
        >
          <ChevronsRight className="h-4 w-4" />
        </button>
      </div>
      
      {/* 每页显示条数选择器 */}
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground">每页</span>
        <select
          value={pageSize}
          onChange={(e) => onPageSizeChange(Number(e.target.value))}
          className="px-2 py-1 border border-input rounded-md text-sm bg-background focus:outline-none focus:ring-2 focus:ring-ring"
        >
          {pageSizeOptions.map((size) => (
            <option key={size} value={size}>
              {size}
            </option>
          ))}
        </select>
        <span className="text-sm text-muted-foreground">项</span>
      </div>
    </div>
  );
};

export default PaginationControls;
